<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body>
<form>
	
	描述：
    <input name="desc" class="layui-input">
    <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>选择图片
    </button>
    <button type="button" class="layui-btn" id="btnUpload">开始上传</button>
    <img id="myPic" src="" width="500" /><br/>
	<a href="update.html?id=111">update</a>
</form>

<script src="../../layui/layui.js"></script>
<script src="../../js/common.js"></script>
<script>
    layui.use(['upload','layer'], function () {
        var upload = layui.upload;
        var $ = layui.$;
		var layer = layui.layer;
        var flag = false;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1'                //绑定元素
            , url: appServerUrl + '/t/upload'      //上传接口
            , method: 'post'
            //*********************传输限制
            , size: 1000                   //传输大小100k
            , exts: 'jpg|png|gif|'        //可传输文件的后缀
            , accept: 'file'              //video audio images
            , field: 'file1'              //设定文件域的字段名
            //****************传输操作相关设置
//            , data: { desc: $("[name=desc]").val()}    //额外传输的参数
//            , headers:{token:'sasasasa'}                   //额外添加的请求头
            , auto: false                                 //自动上传,默认是打开的
            , bindAction: '#btnUpload'                    //auto为false时，点击触发上传
            , multiple: false                             //多文件上传
            //, number: 100                               //multiple:true时有效
            , before: function (obj) {
                flag = true;
                this.data = {
                    desc: $("[name=desc]").val()
                }
            }
            , done: function (res) {                      //传输完成的回调
                console.log(res)
                $('#myPic').attr("src", res.msg);
            }
            , error: function () {                         //传输失败的回调
                //请求异常回调
            }
        });

        $("#btnUpload").on('click',function () {
            if(flag) { // 自动调用layui upload组件上传
				return;
			}
            //修改时如果没有选择文件，手动提交表单
            var formData = new FormData();
            formData.append("desc",$("[name=desc]").val());
//            formData.append("name",$("[name=name]").val());
//            formData.append("age",$("[name=age]").val());
            $.ajax({
                url: appServerUrl + "/t/upload",
                data: formData,
                processData : false, // 使数据不做处理
                contentType : false, // 不要设置Content-Type请求头
                type: 'post',
                dataType: 'json',
                success: function (r) {
                    alert(r.status);
                }
            })
        })
    });
</script>
</body>
</html>